<template>
    <el-dialog v-model="visible" modal-class="audit-dialog" width="900" align-center center :show-close="false">
        <div class="alert" v-if="goodsList.some(v => !v.areaList.length)||['down','up'].includes(batchType)">
            <el-icon>
                <WarningFilled />
            </el-icon>
            <div>{{ batchText[batchType].tip }}</div>
        </div>
        <el-scrollbar max-height="400px">
            <slot name='list'></slot>
        </el-scrollbar>
        <template #footer>
            <div :class="{ 'dialog-footer': true, 'dialog-footer-flex': batchType == 'down' }">
                <el-form :model="form" v-if="batchType == 'down'">
                    <el-form-item label="请选择商品下架原因">
                        <el-radio-group v-model="form.delistType">
                            <el-radio :value="2">停产</el-radio>
                            <el-radio :value="1">暂时下架</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-form>
                <div>
                    <el-button @click="visible = false">取消</el-button>
                    <el-button type="primary" @click="confirmBatch[batchType](form)">{{ batchText[batchType].btnText
                        }}</el-button>
                </div>
            </div>
        </template>
    </el-dialog>
</template>

<script setup>
import { computed, ref } from "vue";
import { batchText } from "../config";

const props = defineProps({
    batchVisible: {
        type: Boolean,
        default: false
    },
    goodsList: {
        type: Array,
        default: () => []
    },
    batchType: {
        type: String,
    },
    confirmBatch: {
        type: Object
    }
});
const emit = defineEmits(['update:batchVisible', 'area']);
const form = ref({
    delistType: 1
})
const visible = computed({
    get() {
        return props.batchVisible
    },
    set(value) {
        emit('update:batchVisible', value)
    }
})
</script>

<style scoped lang="scss">
.alert {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 54px;
    margin: 0 0 10px;
    background: #ffd9c2;
    border-radius: 6px;

    .el-icon {
        color: #e37318;
        margin: 0 10px;
    }
}

.dialog-footer-flex {
    display: flex;
    justify-content: space-between;
}
</style>